<template>
  <f7-page class="forget-pwd-page">
    <f7-navbar :title="`找回${title}密码`" back-link="返回"></f7-navbar>
    <div class="logo-box">
      <img src="../assets/logo.png" alt="">
    </div>
    <div class="container-box">
      <custom-input2 type="email" label="邮箱" placeholder="请输入邮箱"></custom-input2>
      <custom-input2
        type="number"
        label="验证码"
        placeholder="请输入邮箱验证码"
        sms-code
        :count="12"
        :sms-status.sync="smsStatus"
        @send="smsStatus = true"
      ></custom-input2>
      <custom-input2 type="password" label="新密码" :placeholder="`请输入新${title}密码`"></custom-input2>
      <custom-input2 type="password" label="重复密码" :placeholder="`请在此输入新${title}密码`"></custom-input2>

      <f7-button fill class="no-margin">确认修改</f7-button>
    </div>
  </f7-page>
</template>

<script>
  export default {
    name: "forget-pwd",
    data() {
      return {
        smsStatus: false
      }
    },
    computed: {
      title() {
        return this.$f7route.query.type === '1' ? '登录' : '交易'
      }
    }
  }
</script>

<style scoped lang="scss">
  .forget-pwd-page {
    background: url("../assets/home-bg.png") no-repeat center top;
    background-size: 100% 100%;
  }
  .logo-box {
    margin: 100px auto 0;
  }
  .container-box {
    .custom-input2 {
      margin-bottom: 30px;
    }
  }
</style>